<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>MVVM模型</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				MVVM模型：
							1. M：模型(Model) ：对应data中的数据
							2. V：视图(View) ：模板
							3. VM：视图模型(ViewModel) ： Vue实例对象
				观察：
							1.vm身上有很多$开头的属性或方法，这些是给我程序员用的（不是都要用）。
							2.data中所有的属性，也不知怎么了，反正最后都出现在了vm身上。
							3.vm身上所有的属性，以及Vue.prototype中的属性，在模板中都可以直接使用。

		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h3>学校名称：{{name}}</h3>
			<h3>学校地址：{{address}}</h3>
			<h3>x：{{x}}</h3>
			<h3>y：{{y}}</h3>
			<!-- <h3>测试一下1：{{$options}}</h3> -->
			<!-- <h3>测试一下2：{{_c}}</h3> -->
			<!-- <h3>测试一下3：{{$emit}}</h3> -->
			<!-- <h3>测试一下4：{{a}}</h3> -->
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		Vue.prototype.a = 666
		//创建一个Vue实例对象(vm)
		const vm = new Vue({
			el:'#demo',
			data:{
				name:'尚硅谷',
				address:'宏福科技园',
				x:100,
				y:200
			}
		})
		console.log('#',vm)
	</script>
</html>